<template>
	<view class="container">
		<!-- 头部 -->
		<u-navbar class="wd-navbar" :is-back="false" :border-bottom="false" :background="{ background: '#ffffff' }">
			<view class="wd-navbar-down" @click="popupShow = !popupShow">
				<u-icon :name="popupShow?'arrow-up':'arrow-down'" color="#333" size="28"
					:label="currentCity?currentCity.name:''" label-color="#333" label-size="28" label-pos="left"
					margin-right="8"></u-icon>
			</view>
		</u-navbar>
		<!-- 城市选择弹窗 -->
		<u-popup v-model="popupShow" mode="top" z-index="970" border-radius="24" :custom-style="{top: tabsTop+'rpx'}"
			height="60%">
			<view class="down-menu">
				<view class="down-menu-cell" :class="{'disabled':item.disabled}" v-for="(item,index) in cityList"
					:key="index" @click="cityChange(index)">
					<view class="title" :class="{'active':currentCity&&currentCity.id==item.id}">{{ item.name }}</view>
				</view>
			</view>
		</u-popup>
		<!-- 轮播 -->
		<view class="wd-swiper-wrap">
			<u-swiper :list="swiperList" :autoplay="false" height="270" :border-radius="24" mode="round"
				indicator-pos="bottomCenter" @click="swiperClick"></u-swiper>
		</view>
		<!-- 九宫格 -->
		<u-grid :border="false">
			<u-grid-item v-for="(item,index) in tabsList" :key="index">
				<image :src="item.image" style="height: 30px;width: 30px;"></image>
				<text class="grid-text">{{item.name}}</text>
			</u-grid-item>
		</u-grid>
		<u-toast ref="uToast" />
		<!-- 活动 -->
		<view class="hdClass">
			<view class="hdClass_heard">
				<view>蹦迪鸭</view>
				<view @tap="goActivity">更多活动</view>
			</view>
			<view class="hdClass_content">
				<image src="../../../static/images/img_banner.png"></image>
			</view>
		</view>
		<!-- mescroll-body start -->
		<!-- 门店列表 -->
		<view class="mdList">门店列表</view>
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<view class="venue-cell" v-for="(item, index) in dataList" :key="item.id">

				<view class="wd-flex venue-list" @click="shopDetail(item.id)">
					<image class="thumb" :src="item.image" mode="aspectFill"></image>
					<view class="wd-flex-cell">
						<view class="title">{{ item.name }}</view>
						<view class="info">{{ item.mobile }}</view>
						<view class="info">
							{{ item.Area.province }}{{ item.Area.city }}{{ item.Area.region }}{{ item.detail }}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 底部导航栏 start -->
		<u-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar"></u-tabbar>
		<!-- 底部导航栏 end -->
		<!-- <u-empty icon-size="270" src="../../../static/images/icon_empty-class.png" text="当天暂无课程安排哦～" color="#D7D7D7" font-size="26"></u-empty> -->
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const app = getApp();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '暂无门店信息'
					}
				},
				tabsTop: '68',
				date: '',
				currentCity: null,
				//城市
				cityList: [],
				dataList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 99 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无课程安排哦'
					}
				},
				//当前场馆
				currentShop: null,
				//场馆
				menuList: [{
					id: 0,
					name: ''
				}, ],
				tabsTop: '68',
				popupShow: false,
				//轮播
				swiperList: [],
				//分类
				tabsList: [],
				tabsIndex: 0,
				//课程
				dataList: [],
				shopFinishStatus: false,
				categoryFinishStatus: false,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
			}
		},
		onLoad() {
			this.$u.getRect('.wd-navbar').then(res => {
				this.tabsTop = (res.height * (750 / res.width))
			});
			this.fetchBanners();
			this.fetchShops();
			let page = this;
			this.currentShop = this.$core.getCurrentShop();
			uni.$on(app.globalData.event.shopChange, function(shop) {
				page.currentShop = shop;
				page.fetchCategory();
			})
			this.$utils.getAllCities(false).then(data => {
				this.cityList = data;
			});
			this.currentCity = this.$core.getCurrentCity();
			let that = this;
			uni.$on(app.globalData.event.cityChange, function(city) {
				that.currentCity = city;
				that.mescroll.resetUpScroll()
			})
		},
		onShareAppMessage() {
			let user = this.$core.getUserinfo();
			let path = "/pages/tabbar/class/class"
			if (user) {
				path += '?pid=' + user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				path: path,
				imageUrl: app.shareConfig.shareImage
			}
		},
		onShareTimeline() {
			let query = '';
			let user = this.$core.getUserinfo();
			if (user) {
				query = 'pid=' + user.id;
			}
			return {
				title: app.shareConfig.shareTitle,
				query: query,
			}
		},
		methods: {
			// 去活动页
			goActivity() {
				uni.switchTab({
					url: '../activity/activity'
				});
			},
			//获取广告图
			fetchBanners() {
				this.$core.get({
					url: 'fitness.banner/lists',
					loading: false,
					data: {
						group: 'active_index'
					},
					success: (ret) => {
						this.swiperList = ret.data;
					}
				});
			},
			cityChange(index) {
				this.$core.setCurrentCity({
					id: this.cityList[index].id,
					name: this.cityList[index].name
				});
				this.popupShow = false
			},
			// 选择生吃
			confirm(e) {
				console.log(e, '---')
			},
			//广告图
			fetchBanners() {
				this.$core.get({
					url: 'fitness.banner/lists',
					loading: false,
					data: {
						group: 'index'
					},
					success: (ret) => {
						this.swiperList = ret.data;
					}
				});
			},
			//获取店铺
			fetchShops() {
				this.$core.get({
					url: 'fitness.common/shops',
					loading: false,
					data: {},
					success: (ret) => {
						if (ret.data.length > 0) {
							this.menuList = ret.data;
							if (this.currentShop) {
								this.$core.setCurrentShop(this.currentShop);
							} else {
								let menu = ret.data[0];
								this.$core.setCurrentShop({
									id: menu.id,
									name: menu.name,
									logo: menu.image_text.length > 0 ? menu.image_text[0] : '',
									qrcode: menu.qrcode_image_text
								});
							}
						}
					}
				});
			},

			//获取分类
			fetchCategory() {
				let shopId = this.currentShop ? this.currentShop.id : 0;
				this.$core.get({
					url: 'fitness.common/category',
					loading: false,
					data: {
						shop_id: shopId
					},
					success: (ret) => {
						this.tabsList = ret.data;
						// console.log(this.imageUrl, 'imageUrl------')
						this.tabsList.forEach((v) => {
							v.image = app.globalData.imageUri + v.image
						})
						this.mescroll.resetUpScroll()
					}
				});
			},
			//banner
			swiperClick(index) {
				let url = this.swiperList[index].url;
				this.$utils.href(url);
			},
			//切换门店
			menuChange(index) {
				if (this.menuList[index].disabled) return;
				let menu = this.menuList[index];
				this.$core.setCurrentShop({
					id: menu.id,
					name: menu.name,
					logo: menu.image_text.length > 0 ? menu.image_text[0] : '',
					qrcode: menu.qrcode_image_text
				});
				this.popupShow = false
			},
			//切换分类
			tabsChange(index) {
				this.tabsIndex = index;
				this.mescroll.resetUpScroll()
			},
			//切换日期
			// weekClick(date) {
			// 	this.date = date;
			// 	this.mescroll.resetUpScroll()
			// },
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				that.$core.post({
					url: 'fitness.shop/lists',
					loading: false,
					data: {
						page: page.num,
						pagesize: page.size
					},
					success: (ret) => {
						// that.dataList = []
						if (page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
						that.dataList = that.dataList.concat(ret.data.data); //追加新数据
						that.mescroll.endSuccess(ret.data.data.length);
					}
				});
			},
			shopDetail(id) {
				this.$utils.href('/pages/shop/shopDetail/shopDetail?shop_id=' + id)
			},

			dropSwitch(index) {
				let data = this.dataList[index]
				let isSelected = data.isSelected
				this.$set(data, 'isSelected', !isSelected)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wd-navbar-down {
		padding: 10rpx 24rpx;
	}

	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		// height: 238rpx;
		background: #FFFFFF;

		/deep/ .u-tabs {
			border-radius: 0 0 24rpx 24rpx;
		}
	}

	.down-menu {
		background: #FFFFFF;

		&-cell {
			display: flex;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;

			&:first-child {
				border-top: 0;
			}

			.title {
				flex: 1;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;

				&.active {
					color: #6D4BBE;
				}
			}

			&.disabled .title {
				color: #999999;
			}

			.action {
				display: block;
				border: 1rpx #E1E1E1 solid;
				padding: 0 22rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #333333;
				border-radius: 99px;
			}
		}
	}

	.hdClass {
		height: 300rpx;
		width: 94%;
		margin: 0 auto;

		.hdClass_heard {
			height: 80rpx;
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			line-height: 80rpx;
			font-size: 40rpx;
			font-weight: 700;

			// color: #6D4BBE;
			>view:last-child {
				font-size: 32rpx;
				font-weight: 400;
				// color: #0000009c;
				color: #6D4BBE;
			}
		}

		.hdClass_content {
			height: 220rpx;
			width: 100%;
			border-radius: 10rpx;

			>image {
				height: 220rpx;
				width: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.venue-cell {
		margin: 24rpx;
		border-radius: 24rpx;
		overflow: hidden;

		/deep/ .u-swipe-content {
			overflow: hidden;
		}
	}

	.mdList {
		width: 94%;
		margin: 0 auto;
		margin-top: 40rpx;
		font-size: 40rpx;
		font-weight: 700;
	}

	.venue-list {
		position: relative;
		padding: 35rpx 32rpx;
		background: #FFFFFF;
		overflow: hidden;

		.state {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 14rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			border-radius: 0 0 0 24rpx;
			line-height: 42rpx;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.thumb {
			display: block;
			margin-right: 24rpx;
			width: 200rpx;
			height: 144rpx;
			border-radius: 12rpx;
		}

		.title {
			margin-bottom: 4rpx;
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}

		.info {
			line-height: 40rpx;
			font-size: 26rpx;
			color: #666666;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}

	.down-menu {
		background: #FFFFFF;

		&-cell {
			display: flex;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;

			&:first-child {
				border-top: 0;
			}

			.title {
				flex: 1;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
				overflow: hidden;

				&.active {
					color: #6D4BBE;
				}
			}

			&.disabled .title {
				color: #999999;
			}

			.action {
				display: block;
				border: 1rpx #E1E1E1 solid;
				padding: 0 22rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				color: #333333;
				border-radius: 99px;
			}
		}
	}
</style>